<template>
  <form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
  <div class="tuijian">
        <h2>热门推荐</h2>
        <div>
        <ul>
            <li>龙支付</li>
            <li>酷跑寻宝之路</li>
            <li>快贷</li>
            <li>手机号收款</li>
            <li>惠省钱</li>
            <li>投资理财</li>
            <li>代理信托</li>
            <li>转账</li>
        </ul>
    </div>
    </div>
    <div class="resou">
        <h2>热搜榜</h2>
        <ul>
            <li><span>1</span>分期通</li>
            <li><span>2</span>酷宝寻宝之旅</li>
            <li><span>3</span>数字人民币</li>
            <li><span>4</span>惠省钱</li>
            <li><span>5</span>快贷</li>
            <li><span>6</span>手机号收款</li>
            <li><span>7</span>车主福利</li>
            <li><span>8</span>额度查询</li>
            <li><span>9</span>一键绑卡享好礼</li>
            <li><span>10</span>积分兑换</li>
        </ul>
    </div>
    
</form>
    
</template>

<script>
    import { Toast } from 'vant';

export default {
  data() {
    return {
      value: '',
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
    //   Toast('搜索');
    this.$router.push("/index");
    },
  },
};
</script>

<style lang="scss">
   .tuijian{
    width: 90%;
    margin: 0 auto;
    h2{
        font-size: .2rem;
        font-weight: bold;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        li{
            margin: .1rem;
            padding: .05rem;
            border-radius: .5rem;
            background-color: gray;
            color: #000;
            font-weight: bold;
        }
    }
   }
   .resou{
    width: 90%;
    margin:.1rem auto;
    h2{
        font-size: 20px;
        font-weight: bold;
    }
    ul{
        height: 5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        span{
            font-weight: bold;
            margin-right: .3rem;
        }
    }
   }
</style>